<template>
<div class="index-wrap">
    <div class="btn-group">
        <el-button type="primary" icon="el-icon-circle-plus" @click="addUser">添加用户</el-button>
        <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
        <div class="search">
            <el-input v-model="keywords" placeholder="请输入内容" prefix-icon="el-icon-search">
                <el-button slot="append" icon="el-icon-search"  @click="refresh"></el-button>
            </el-input>
        </div>
    </div>

    <el-dialog title="添加新用户" :visible.sync="addUser.CodeMirrorype">
        <el-form :model="addUserForm" :rules="rulesForm" ref="addUserForm" label-width="100px">
            <el-form-item label="选择头像">
                <div class="bg-avatar" :style='{background:"url("+avatarInage+")"}'></div>
                <avatar-cropper v-on:imageData="imageData"></avatar-cropper>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="addUserForm.userName" placeholder="请填写用户名称"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="addUserForm.nickName" placeholder="请输入昵称(选填)"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="addUserForm.email" placeholder="请输入邮箱(选填)"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNum">
                <el-input v-model="addUserForm.phoneNum" placeholder="请输入手机号(选填)"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="addUserForm.password" show-password placeholder="请填写6至18位的密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="addUserForm.confirmPassword" show-password placeholder="请填写确认密码"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select placeholder="请选择状态" v-model="addUserForm.status">
                    <el-option label="启用" value="Normal"></el-option>
                    <el-option label="禁用" value="Fail"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('addUserForm')">立即创建</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="id" width="70"></el-table-column>
        <el-table-column prop="avatar" label="头像" width="70">
            <template slot-scope="scope">
                <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                <el-avatar v-else>{{scope.row.nickname}}</el-avatar>
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column prop="account.money" label="账户余额" align="center" width="91"></el-table-column>
        <el-table-column prop="account.integral" label="积分" align="center" width="71"></el-table-column>
        <el-table-column prop="account.bonus" label="增值余额" align="center" width="91"></el-table-column>
        <el-table-column prop="account.profit" label="奖金余额" align="center" width="91"></el-table-column>
        <el-table-column prop="mobile" label="手机号" width="111"></el-table-column>
        <el-table-column label="用户身份" width="121" align="center">
            <template slot-scope="scope">
                <el-dropdown>
                    <span class="el-dropdown-link" v-if="scope.row.roles[0]" @click="userIdentity(scope.row)">
                        {{ scope.row.roles[0].title }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in scope.row.roles" :key="item">{{ item.title }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
        <el-table-column prop="parent_id" label="绑定父级" width="150">
            <template slot-scope="scope">
                <el-link v-if="scope.row.parent" @click="userParent(scope.row)"> ID: {{scope.row.parent.id}} | 昵称: {{scope.row.parent.nickname}}</el-link>
                <el-link v-else @click="userParent(scope.row)">暂无</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="71">
            <template slot-scope="scope">
                <el-link :type="scope.row.status == 'Normal' ? 'danger' : 'primary'">{{ scope.row.status == 'Normal' ? '禁用' : '启用' }}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="130"></el-table-column>
        <el-table-column prop="updated_at" label="最后修改时间" width="150"></el-table-column>
        <el-table-column class="tabs-tool" label="操作" fixed="right" width="141" align="center">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="用户明细" placement="top">
                    <i @click="viewDetails(scope.row.id)" class="el-icon-s-order"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="赠送秒抢券" placement="top">
                    <i @click="SecKillCouponType = true;SecKillCouponData.id =  scope.row.id" class="el-icon-circle-plus-outline"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="升级店长" placement="top">
                    <i @click="clerk(scope.row)" class="fas fa-arrow-circle-up table-right-icon"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="资金管理" placement="top">
                    <i @click="funds(scope.row.account)" class="fas fa-dollar-sign table-right-icon"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <i @click="edit(scope.row)" class="fas fa-edit table-right-icon"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="修改密码" placement="top">
                    <i @click="changePass(scope.row)" class="fas fa-key table-right-icon"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除此用户" placement="top">
                    <i @click="deleteuser(scope.row)" class="fas fa-times table-right-icon color-Danger"></i>
                </el-tooltip>
            </template>
        </el-table-column>
        <div style="margin: 20px auto;text-align:center;" slot="append">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPage" @prev-click="handlePrevPage" @next-click="handleNextPage" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </el-table>

    <el-dialog :title="editTitle" :visible.sync="editType" :close-on-click-modal="false">
        <el-tabs tab-position="top">
            <el-tab-pane label="基本用户信息">
                <el-form label-position="right" :rules="editRules" ref="edit" label-width="100px" :model="editForm">
                    <el-col :offset="2" :span="19">
                        <el-form-item label="头像">
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="9">
                        <el-form-item :span="12" label="用户名" size="mini">
                            <el-input v-model="editForm.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="昵称" size="mini">
                            <el-input v-model="editForm.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="9">
                        <el-form-item prop="phoneNum" label="手机号" size="mini">
                            <el-input v-model="editForm.phoneNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item prop="email" label="邮箱" size="mini">
                            <el-input v-model="editForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="9">
                        <el-form-item prop="realname" label="真实姓名" size="mini">
                            <el-input v-model="editForm.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="年龄" size="mini">
                            <el-input v-model="editForm.age"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="9">
                        <el-form-item label="性别" size="mini">
                            <el-select placeholder="请选择性别" v-model="editForm.sex">
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="血型" size="mini">
                            <el-select placeholder="血型" size="mini" v-model="editForm.blood">
                                <el-option label="A型" value="A"></el-option>
                                <el-option label="B型" value="B"></el-option>
                                <el-option label="AB型" value="AB"></el-option>
                                <el-option label="O型" value="O"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="19">
                        <el-form-item prop="identity" label="身份证号码" size="mini">
                            <el-input v-model="editForm.identity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="19">
                        <el-form-item label="用户签名" size="mini">
                            <el-input v-model="editForm.signature"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('edit')"> 立即修改 </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>

    <el-dialog title="资金管理" :visible.sync="fundsType">
        <el-form :model="fundsForm" ref="funds" :rules="fundsRules" label-width="100px">
            <el-form-item label="账户余额" prop="money">
                <el-input type="number" v-model="fundsForm.money"></el-input>
            </el-form-item>
            <el-form-item label="积分" prop="money">
                <el-input type="number" v-model="fundsForm.integral"></el-input>
            </el-form-item>
            <el-form-item label="增值余额" prop="money">
                <el-input type="number" v-model="fundsForm.bonus"></el-input>
            </el-form-item>
            <el-form-item label="奖金余额" prop="money">
                <el-input type="number" v-model="fundsForm.profit"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('funds')"> 立即修改 </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="权限" :visible.sync="userIdentityType">
        <el-form :model="userIdentityFrom" ref="Identity" label-position="left">
            <el-form-item class="clearfix">
                <div v-for="(item,index) in userIdentityData" :key="index" class='card inline-block clearfix'>
                    <div class="card-header clearfix">
                        {{ item.title }}
                    </div>
                    <el-radio-group v-model="item.value">
                        <el-radio style="display: block;margin-bottom: 5px;" v-for="items in item.roles" :key="items.name" :name="items.name" :value="items.name" :label="items.title"></el-radio>
                    </el-radio-group>
                </div>

            </el-form-item>
            <el-form-item class="clearfix">
                <el-button type="primary" @click="submitForm('Identity')"> 立即修改 </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="选择父级" :visible.sync="userParentType">
        <div class="good-main">
            <div class="good-avatar">
                <el-avatar :size="60">
                    <img :src="selectParent.avatar" v-if="selectParent" />
                    <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                </el-avatar>
            </div>

            <div class="good-info" v-if="selectParent">
                <p>{{selectParent.nickname}}</p>
                <p>ID:￥{{selectParent.id}}</p>
            </div>
            <div class="good-null" v-else>暂未选择父级</div>
        </div>
        <div class="btn-group clearfix" style="margin:0 0 10px 0">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" style="width:50%" v-model="searchUserKeywords"></el-input>
            <el-button type="primary" @click="handleSelectGoodSearch">搜索</el-button>
        </div>
        <el-table :data="selectParentData.data" stripe highlight-current-row style="width: 100%" @row-click="handleSelectGood">
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="avatar" label="头像" width="91">
                <template slot-scope="scope">
                    <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                    <el-avatar v-else>{{scope.row.nickname}}</el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" width="111"></el-table-column>
            <el-table-column prop="username" label="用户名" width="180"></el-table-column>
            <el-table-column prop="account.money" label="账户余额" align="center" width="91"></el-table-column>
            <el-table-column prop="account.integral" label="积分" align="center" width="71"></el-table-column>
            <el-table-column prop="account.bonus" label="增值余额" align="center" width="91"></el-table-column>
            <el-table-column prop="account.profit" label="奖金余额" align="center" width="91"></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="111"></el-table-column>
            <el-table-column prop="status" label="状态" width="71">
                <template slot-scope="scope">
                    <el-link :type="scope.row.status == 'Normal' ? 'danger' : 'primary'">{{ scope.row.status == 'Normal' ? '禁用' : '启用' }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <div class="q-pagination" slot="append">
                <el-pagination background layout="prev, pager, next" :page-size="selectParentData.per_page"  :total="selectParentData.total" @current-change="handleSelectGoodPageClick"></el-pagination>
            </div>
        </el-table>
        <el-button type="primary" @click="clearParent"> 清除父级 </el-button>
        <el-button type="primary" @click="editParent"> 立即修改 </el-button>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="changePassType" width="50%">
        <el-form :model="changePassForm" ref="changePass" :rules="ruleschangePassForm" label-width="121px">
            <el-form-item label="输入新密码" prop="password">
                <el-input type="password" show-password v-model="changePassForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('changePass')"> 立即修改 </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="用户明细" :visible.sync="userViewDetailsType" width="80%">
        <el-tabs v-model="userViewDetailActive" @tab-click="changeUserViewActive">
            <el-tab-pane label="买卡" name="BuyCard"></el-tab-pane>
            <el-tab-pane label="商店消费" name="StoreExpense "></el-tab-pane>
            <el-tab-pane label="升级店长" name="Clerk"></el-tab-pane>
            <el-tab-pane label="购买卡券" name="BuyCoupons"></el-tab-pane>
            <el-tab-pane label="充值" name="Change"></el-tab-pane>
            <el-tab-pane label="出售商品" name="Sell"></el-tab-pane>
        </el-tabs>
          <template>
            <el-table
            :data="userViewDetailsData.data"
            style="width: 100%"
            height="540">
            <el-table-column
                prop="created_at"
                label="支付时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="order_sn"
                label="订单ID"
                width="180">
            </el-table-column>
            <el-table-column
                label="交易金额">
                <template slot-scope="scope">
                   ￥ {{  scope.row.money  }}
                </template>
            </el-table-column>
            <el-table-column
                prop="bonus"
                label="奖金"
                width="180">
            </el-table-column>
            <el-table-column
                prop="integral"
                label="增送积分"
                width="180">
            </el-table-column>
            <el-table-column
                label="支付方式"
                width="180">
                <template slot-scope="scope">
                <span v-if=" scope.row.pay_mode == 'Wechat'">微信支付</span>
                <span v-else> 余额支付 </span>
                </template>
            </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px">
                <el-pagination
                @size-change="userViewDetailsDatas"
                @current-change="userViewDetailsDatas"
                :current-page.sync="userViewDetailsData.current_page"
                :page-size="20"
                layout="prev, pager, next, jumper"
                :total="userViewDetailsData.last_page">
            </el-pagination>
            </div>
        </template>
    </el-dialog>
    <el-dialog title="赠送秒抢券" width="30%" :visible.sync="SecKillCouponType">
        <el-form :model="SecKillCouponData">
            <el-form-item label="数量" label-width="80px">
            <el-input v-model="SecKillCouponData.number" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="SecKillCouponType = false">取 消</el-button>
            <el-button type="primary" @click="sendSecKillCoupon">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    constants
} from "crypto";
import axios from "axios";
import avatarCropper from "@/components/AvatarCropper";
let _this;
export default {
    name: "Index",
    data() {
        return {
            keywords:null,
            searchUserKeywords: null,
            selectParentData: [],
            selectParentId: null,
            selectParent: null,
            userParentType: false,
            addUserType: false,
            editType: false,
            fundsType: false,
            userIdentityType: false,
            fundsId: '',
            changePassId: '',
            editId: '',
            changePassType: false,
            editTitle: '',
            options: null,
            id: null,
            total: 0,
            currentPage: 0,
            pageSize: 10,
            avatarInage: '',
            addUserForm: {
                userName: "",
                nickName: "",
                password: "",
                email: "",
                confirmPassword: "",
                parent_id: 0,
                avatar: "",
                status: "Normal",
                phoneNum: null,
            },
            editForm: {
                userName: "",
                nickName: "",
                email: "",
                age: "",
                sex: 0,
                blood: "O",
                identity: "",
                realname: "",
                avatar: "",
                status: "Normal",
                phoneNum: null,
                signature: null
            },
            fundsForm: {
                money: null,
                integral: null,
                bonus: null,
                profit: null,
            },
            changePassForm: {
                password: '',
            },
            userIdentityData: {},
            userIdentityFrom: {},
            userIdentityRadio: null,
            rulesForm: {
                userName: [{
                    required: true,
                    validator: userNameValiData,
                    trigger: "change"
                }],
                password: [{
                    required: true,
                    validator: passwordValiData,
                    trigger: "change"
                }],
                confirmPassword: [{
                    required: true,
                    validator: confirmPasswordValiData,
                    trigger: "change"
                }],
                email: [{
                    required: true,
                    validator: emailValiData,
                    trigger: "change"
                }],
                phoneNum: [{
                    required: true,
                    validator: phoneNumValiData,
                    trigger: "change"
                }]
            },
            editRules: {
                phoneNum: [{
                    required: true,
                    validator: editPhoneNumValiData,
                    trigger: "change"
                }],
                email: [{
                    required: true,
                    validator: emailValiData,
                    trigger: "change"
                }],
                realname: [{
                    required: true,
                    validator: editRealnameValiData,
                    trigger: "change"
                }],
                identity: [{
                    required: true,
                    validator: editidentityValiData,
                    trigger: "change"
                }],
            },
            ruleschangePassForm: {
                password: [{
                    required: true,
                    validator: changePassFormPasswordValiData,
                    trigger: "change"
                }]
            },
            fundsRules: {
                money: [{
                    required: true,
                    validator: fundsmoneyValiData,
                    trigger: "change"
                }],
                integral: [{
                    required: true,
                    validator: integralValiData,
                    trigger: "change"
                }]
            },
            tableData: null,
            userViewDetailsType: false,
            userViewDetailActive : 'BuyCard',
            userViewDetailsData: {
                data:[]
            },
            SecKillCouponType: false,
            SecKillCouponData:{}
        };
    },
    components: {
        avatarCropper
    },
    methods: {
        async getUserList(params = {}) {
            if (Object.keys(params).length < 1) {
                params = {
                    pageSize: this.pageSize
                };
            }
            if(this.keywords){
                params.keywords = this.keywords;
            }
            axios.get("/api/v1/user/list", {
                    params
                })

                .then(result => {
                    this.tableData = result.data.data.data;
                    this.total = result.data.data.total;
                    this.currentPage = result.data.data.current_page;
                })
                .catch(_ => {
                    console.log(_);
                });
        },
        async getSelectData(params = {}) {
            if (Object.keys(params).length < 1) {
                params = {
                    pageSize: 6
                };
            }
            axios.get("/api/v1/user/list", {
                    params
                })

                .then(result => {
                    this.selectParentData = result.data.data;
                })
                .catch(_ => {
                    console.log(_);
                });

        },
        viewDetails(id){
            this.userViewDetailsId = id;
            this.userViewDetailsType = !0;
            this.userViewDetailsData = {
                data:[]
            };
            this.changeUserViewActive();
        },
        async sendSecKillCoupon(){
            const res = await axios.post(`/api/store/admin/user/presentSecKillCoupon/${this.SecKillCouponData.id}`,{
                number:  this.SecKillCouponData.number
            });
            this.$message({
                message: res.data.message,
                type: 'success'
            });
            this.SecKillCouponType = false;
        },
        async changeUserViewActive(){
            const data = await axios.post(`/api/store/admin/record/transaction/${this.userViewDetailsId}/${this.userViewDetailActive}`)
            this.userViewDetailsData = data.data.data;
        },
        userViewDetailsDatas(item){
            console.log(item)
        },
        clerk(e){
            axios.post("/api/store/admin/user/upClerk/"+e.id)
                .then(result => {
                    this.notice("success",result.data.message)
                })
                .catch(_ => {
                    this.notice("error", error.response.data.message)
                });
        },
        handleSelectGoodPageClick(e) {
           let params = {};
            if (this.searchUserKeywords) {
                params.keywords = this.searchUserKeywords;
            }
            params.page = e;
            params.pageSize = 6;
            this.getSelectData(params);
        },
        handleSelectGood(e) {
            this.selectParent = e;
        },
        handleSelectGoodSearch(e) {
            let params = {};
            if (this.searchUserKeywords) {
                params.keywords = this.searchUserKeywords;
            }
            params.pageSize = 6;
            this.getSelectData(params);
        },
        userParent(row) {
            this.userParentType = true;
            this.selectParent = row.parent;
            this.selectParentId = row.id;
            this.getSelectData();
        },
        handleSizeChange(val) {
            this.pageSize = Number(val);
            this.getUserList();
        },
        async handleCurrentPage(val) {
            let params = {
                pageSize: this.pageSize,
                page: val
            };
            _this.getUserList(params)
        },
        handlePrevPage(val) {
            let params = {
                pageSize: this.pageSize,
                page: val - 1
            };
            _this.getUserList(params)
        },
        handleNextPage() {
            let params = {
                pageSize: this.pageSize,
                page: val + 1
            };
            _this.getUserList(params)
        },
        addUser() {
            this.addUserType = true;
        },
        imageData(data) {
            this.avatarInage = data;
        },
        clearaddUserFrom() {
            let addUserForm = {
                userName: "",
                nickName: "",
                password: "",
                email: "",
                confirmPassword: "",
                parent_id: 0,
                avatar: "",
                status: "Normal",
                phoneNum: null
            };
            this.addUserForm = addUserForm;
        },
        optio(e) {
            console.log(this.$attrs)
            console.log(e)
        },
        clearParent(){
          let parent_id = 0;
            axios
                .post("/api/v1/user/editParent/"+ this.selectParentId, {
                    parent_id: parent_id,
                })
                .then(reslut => {
                  console.log(reslut);
                    this.notice("success", reslut.data.message);
                    this.userParentType = false;
                    this.getUserList();
                })
                .catch(error => {
                  
                });
        },
        editParent() {
            let parent_id = 0;
            if(this.selectParent){
              parent_id = this.selectParent.id;
            }
            axios
                .post("/api/v1/user/editParent/"+ this.selectParentId, {
                    parent_id: parent_id,
                })
                .then(reslut => {
                    this.notice("success", reslut.data.message);
                    this.userParentType = false;
                    this.getUserList();
                })
                .catch(error => {
                  
                });
        },
        submitForm(formName) {
            console.log(formName)
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (formName == "addUserForm") {
                        axios
                            .post("/api/v1/user/create", {
                                username: this.addUserForm.userName,
                                nickname: this.addUserForm.nickName,
                                password: this.addUserForm.password,
                                password_confirmation: this.addUserForm.confirmPassword,
                                email: this.addUserForm.email,
                                parent_id: 0,
                                avatar: this.addUserForm.avatar,
                                status: this.addUserForm.status,
                                mobile: this.addUserForm.phoneNum
                            })
                            .then(reslut => {
                                this.notice("success", reslut.data.message);
                                this.addUserType = false;
                                this.getUserList();
                                this.clearaddUserFrom();
                            })
                            .catch(error => {
                                let str = "";
                                Object.keys(error.response.data.message).forEach(index => {
                                    str += error.response.data.message[index][0] + "<br >";
                                });
                                this.notice("error", str);
                            });
                    } else if (formName == "funds") {
                        const getFunds = axios.post('api/v1/user/accountUpdate/' + this.fundsId, {
                            money: this.fundsForm.money,
                            bonus: this.fundsForm.bonus,
                            profit: this.fundsForm.profit,
                            integral: this.fundsForm.integral
                        });
                        getFunds.then(reslut => {
                            this.notice('success', reslut.data.message);
                            this.getUserList();
                            this.fundsType = false;
                        }).catch(error => {
                            let str = "";
                            Object.keys(error.response.data.message).forEach(index => {
                                str += error.response.data.message[index][0] + "<br >";
                            });
                            this.notice("error", str);
                        })
                    } else if (formName == 'changePass') {
                        const getChangePass = axios.get(`/api/v1/user/resetPassword/${this.changePassId}?password=${this.changePassForm.password}`);
                        getChangePass.then(reslut => {
                            this.notice('success', reslut.data.message)
                            this.getUserList();
                            this.changePassType = false;
                        }).catch(error => {
                            console.log(error)
                            this.notice("error", error.response.data.message)
                        })
                    } else if (formName == 'edit') {
                        const getEdit = axios.post(`/api/v1/user/edit/` + this.editId, {
                            username: this.editForm.userName,
                            nickname: this.editForm.nickName,
                            email: this.editForm.email,
                            age: this.editForm.age,
                            sex: this.editForm.sex,
                            blood: this.editForm.blood,
                            identity: this.editForm.identity,
                            realname: this.editForm.realname,
                            avatar: this.editForm.avatar,
                            status: this.editForm.status,
                            mobile: this.editForm.phoneNum,
                            signature: this.editForm.signature
                        });
                        getEdit.then(reslut => {
                            this.notice('success', reslut.data.message);
                            this.editType = false;
                            this.getUserList();
                        }).catch(error => {
                            this.notice('error', '修改失败,请重尝试')
                            console.log(error)
                        })
                    } else if (formName == 'Identity') {
                        let userIdentityData = this.userIdentityData;
                        let arr = [];
                        userIdentityData.forEach(item => {
                            item.roles.forEach(items => {
                                if (item.value == items.title && items.name !== "null") {
                                    arr.push(items.name)
                                }
                            })
                        });
                        let jsonIdentity = JSON.stringify(arr);
                        const getIdentity = axios.post('/api/v1/user/syncRole/' + this.id, {
                            roles: jsonIdentity
                        });
                        getIdentity.then(result => {
                            this.notice('success', result.data.message);
                            console.log(1)
                            this.userIdentityType = false;
                            console.log(2)
                            this.getUserList();
                        }).catch(error => {
                            this.notice('error', '请稍后再试');
                        })
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        userIdentity(e) {
            this.id = e.id;
            const getUserTreeData = axios.get('/api/v1/role/treeData/' + this.id);
            getUserTreeData.then(reslut => {
                let userIdentityData = reslut.data.data;
                this.userIdentityData = reslut.data.data;
            }).catch(error => {
                console.log(error)
                this.notice('error', "加载错误,请重试!")
            })
            this.userIdentityType = true;
        },
        funds(e) {
            this.fundsId = e.user_id;
            let fundsForm = {
                money: e.money,
                integral: e.integral,
                bonus: e.bonus,
                profit: e.profit,
            };
            this.fundsForm = fundsForm;
            this.fundsType = true;
        },
        changePass(e) {
            this.changePassId = e.id;
            this.changePassType = true;
        },
        edit(e) {
            this.editId = e.id;
            let editForm = {
                userName: e.username,
                nickName: e.nickname,
                email: e.email,
                age: e.age,
                sex: 0,
                blood: 'O',
                identity: e.identity,
                realname: e.realname,
                avatar: e.avatar,
                status: e.realnstatusame,
                phoneNum: e.mobile
            };
            this.editForm = editForm;
            this.editTitle = `正在编辑 [ ${e.username} ] `;
            this.editType = true;
        },
        deleteuser(e) {
            this.$confirm(`您确定要删除 [ ${e.username} ] 吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.get('/api/v1/user/delete/' + e.id)
                    .then(reslut => {
                        _this.getUserList();
                        this.notice("success", reslut.data.message);
                    }).catch(error => {
                        this.notice("error", error.response.data.message);
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        refresh() {
            this.getUserList();
            this.notice('success', "刷新成功")
        },
        notice(index, str) {
            switch (index) {
                case "error":
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        message: str,
                        type: "error"
                    });
                    break;
                case "success":
                    this.$message({
                        message: str,
                        type: "success"
                    });
                    break;
                case "warning":
                    this.$message({
                        message: str,
                        type: "warning"
                    });
                    break;
                default:
                    this.$message(str);
                    break;
            }
        }
    },
    beforeCreate: function () {
        console.log("------beforeCreate创建前状态------");
    },
    created: function () {
        console.group("------created创建完毕状态------");
        this.getUserList();
    },
    mounted: function () {
        _this = this;
        console.log("------mounted 挂载结束状态------");
    }
};
export function userNameValiData(rule, value, callback) {
    const reg = /^[a-zA-Z0-9_-]{2,16}$/;
    if (!value) {
        return callback(new Error("请填写用户名称"));
    } else if (!reg.test(value)) {
        return callback(new Error("用户格式错误"));
    } else {
        callback();
    }
}

export function passwordValiData(rule, value, callback) {
    if (!value) {
        return callback(new Error("请填写密码"));
    } else if (value.length < 6) {
        return callback(new Error("请输入6位以上的密码"));
    } else if (value.length > 18) {
        return callback(new Error("请输入18位一下的密码"));
    } else {
        callback();
    }
}

export function confirmPasswordValiData(rule, value, callback) {
    if (!value) {
        return callback(new Error("请再次输入密码"));
    } else if (value !== _this.addUserForm.password) {
        return callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
}

export function emailValiData(rule, value, callback) {
    const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (value) {
        if (!reg.test(value)) {
            return callback(new Error("请输入正确的邮箱"));
        } else {
            callback();
        }
    } else {
        callback();
    }
}

export function phoneNumValiData(rule, value, callback) {
    const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
    if (value) {
        if (!reg.test(value)) {
            return callback(new Error("请填写正确的手机号"));
        } else {
            callback();
        }
    } else {
        callback();
    }
}
// 修改密码验证规则
export function changePassFormPasswordValiData(rule, value, callback) {
    if (!value) {
        return callback(new Error("请填写密码"));
    } else if (value.length < 6) {
        return callback(new Error("请输入6位以上的密码"));
    } else if (value.length > 18) {
        return callback(new Error("请输入18位一下的密码"));
    } else {
        callback();
    }
}
export function fundsmoneyValiData(rule, value, callback) {
    const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;

    if (!value) {
        return callback(new Error("请输入"));
    } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的值"));
    } else {
        callback();
    }

}
export function integralValiData(rule, value, callback) {
    const reg = /^\d+$/
    if (value === undefined || value === '') {
        return callback(new Error("请输入1"));
    } else if (!reg.test(value)) {
        return callback(new Error("只能为正整数"));
    } else {
        callback();
    }
}

// 编辑验证规则

export function editRealnameValiData(rule, value, callback) {
    const reg = /^[\u4e00-\u9fa5]+$/;
    if (value) {
        if (!reg.test(value)) {
            return callback(new Error('真实名称格式错误'))
        } else {
            callback()
        }
    } else {
        callback()
    }
}

export function editPhoneNumValiData(rule, value, callback) {
    const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
    if (!value) {
        return callback(new Error("请填写手机号"));
    } else if (!reg.test(value)) {
        return callback(new Error("请填写正确的手机号"));
    } else {
        callback();
    }
}

export function editidentityValiData(rule, value, callback) {
    const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;
    if (value) {
        if (!reg.test(value)) {
            return callback(new Error("请填写正确的身份证号码"));
        } else {
            callback();
        }
    } else {
        callback();
    }
}

// 用户基本信息
</script>

<style lang="less" scoped>
.pagination {
    text-align: center;
    padding-top: 20px;
}

.pagination::after,
.pagination::before {
    content: " ";
    display: block;
    clear: both;
}

.color-Danger {
    color: #f56c6c;
}

.search {
    float: right;
}

.bg-avatar {
    display: inline-block;
    height: 50px;
    width: 50px;
}

.good-main {
    padding: 14px;
    border: 1px solid #ebebeb;
    margin-bottom: 10px !important;
    display: grid;
    grid-template-columns: 65px 1fr;

    .good-info p {
        margin: .55rem 0;

    }

    div {
        display: inline-block;
        overflow: hidden;

        &.good-null {
            line-height: 60px;
        }
    }

    &>.el-avatar {
        width: 60px !important;
        height: 60px !important;
    }

}
.tabs-tool {
    .item {
        margin-left: .25rem;
        i {
            font-size: 2rem;
        }
    }
}
</style>
